<template>
  <div class="lab-container">
    <!-- 导航栏（保持原有顶部导航） -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
      <!-- 原有导航栏代码保持不变 -->
    </nav>

    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-3">
          <div class="border p-3">
            <h5 class="mb-3">人才引进</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-9">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/homePage">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/talentIntroduction">人才引进</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">人才招聘</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div v-for="(item, index) in talents" :key="index">
                <p class="p mb-3" v-text="item.message"></p>
                联系人:
                <span class="mb-3" v-text="item.name"></span><br />
                邮箱：
                <span class="p mb-3" v-text="item.email"></span>
              </div>
            </template>
            <template v-if="activeTab === 1">
              <h3 class="mb-4">博士后招聘</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div v-for="(item, index) in postdoctor" :key="index">
                <p class="p mb-3" v-text="item.message"></p>
                联系人:
                <span class="mb-3" v-text="item.name"></span><br />
                邮箱：
                <span class="p mb-3" v-text="item.email"></span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const activeTab = ref(0);
const tabs = ref([
  {
    title: "人才招聘",
    content: "人才招聘内容",
  },
  {
    title: "博士后招聘",
    content: "博士后招聘内容",
  },
]);

const talents = reactive([
  {
    message:
      "本实验室长期面向国内外高校、科研机构招聘优秀青年人才和学科领军人才。",
    name: "赖欣",
    number: "18071072126",
    email: "laixin@whut.edu.cn",
  },
]);
const postdoctor = reactive([
  {
    message:
      "本实验室长期面向国内外高校、科研机构招聘计算力学、新材料力学、微纳力学、热电功能材料力学等研究方向博士后",
    name: "陈刚（微纳力学、热电功能材料力学方向）",

    email: "cg_chen@whut.edu.cn",
  },
  {
    message: "",
    name: "李兴",
    email: "laixin@whut.edu.cn",
  },
]);
</script>

<style scoped>
.custom-divider {
  height: 2px;
  background-color: var(--site-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.nav-link,
.nav-link:hover {
  color: var(--site-color);
}
li > a {
  color: var(--site-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--site-color);
  color: white !important;
}

.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>